<template>
  <div>
    <div class="nav-bar">
      <div class="nav-content">
        <el-row>
          <el-col :span="2">
            <a @click="$router.push('/main')">首页</a>
          </el-col>
          <!-- <el-col :span="2">
            <a>问题</a>
          </el-col> -->
          <el-col :span="6" :offset="3">
              <el-input v-model="searchContent" suffix-icon="el-icon-search"></el-input>
          </el-col>
          <el-col :span="3" :offset="1">
            <el-button type="primary" @click="search()">搜索</el-button>
          </el-col>
          <el-col :span="2" :offset="5">
            <div v-if="!isLogin">
              <el-button type="success" @click="toLogin()">登陆</el-button>
            </div>
            <div class="avatar" v-if="isLogin" @click="demo()">
              <el-popover placement="bottom" width="80px" trigger="hover">
                  <p class="label-hover" @click="toMine()"><i class="el-icon-user-solid"></i>我的主页</p>
                  <p class="label-hover" @click="logout()"><i class="el-icon-switch-button"></i>退出</p>
                  <img :src="avatar" class="avatar-bg" slot="reference" alt="avatar">
              </el-popover>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NavBar',
  data () {
    return {
      isLogin: false,
      searchContent: '',
      // imgUrl: ''
      avatar: ''
    }
  },
  created () {
    this.getInfo()
  },
  methods: {
    demo () {
      console.log(123)
    },
    toMine () {
      this.$router.push('/user-page?id=' + localStorage.getItem('userId'))
    },
    getInfo () {
      this.$store.dispatch('GetInfo').then(res => {
        this.avatar = 'http://127.0.0.1:9901' + res.data.data.avatar
      }).catch(err => {
        console.log(err)
      })
      if (localStorage.getItem('userId') === '') {
        this.isLogin = false
      } else {
        this.isLogin = true
      }
    },
    search () {
      if (this.searchContent) {
        this.$router.push('/main?desc=' + this.searchContent)
      } else {
        this.$router.push('/main')
      }
    },
    toLogin () {
      this.$router.push('/login')
    },
    logout () {
      localStorage.setItem('userId', '')
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="scss" scoped>
.nav-bar {
  width: 100%;
  position: fixed;
  background: #fff;
  top: 0;
  padding: 10px;
  line-height: 50px;
  height: 70px;
  z-index: 100;
  // border-bottom: 1px solid #ccc;
  box-shadow: 0 1px 3px rgba(26,26,26,.1);
  .nav-content {
    width: 60%;
    margin: 0 auto;
    .avatar {
      width: 50px;
      height: 50px;
      border: 1px solid #efefef;
      // background: #efefef;
      img {
        width: 50px;
        height: 50px;
      }

    }

  }

}
.label-hover {
  padding: 3px;
}
.label-hover:hover{
  // color: black;
  background: #EBEEF5;
  cursor: pointer;
}
</style>
